<template>
  <div class="block-con">
    <div v-if="list.length>0">
      <router-link :to="{name:'positionDetail',query:{id:item.jobPublish.id}}" v-for="(item,index) in list" :key="item.id" class="position-item">
        <div class="info-block">
          <div class="position-name-block">
            <div class="position-name">{{item.jobPublish.jobTitle }}</div>
            <div class="position-wage" v-if="item.jobPublish.minSalary">{{item.jobPublish.minSalary}}-{{item.jobPublish.maxSalary}}元</div>
            <div class="position-wage" v-else>面议</div>
          </div>
          <div class="position-label-block">
            <!--        <div class="position-label-item" v-for="(item1,index1) in data.label">{{ item1 }}</div>-->
            <div class="position-label-item">{{item.jobPublish.comRecruiters.enterprise.welfare}}</div>
          </div>
          <div class="company-block">
            <img :src="item.jobPublish.comRecruiters.enterprise.logoUrl" alt="" @error="imgError" class="company-photo">
            <div class="name">{{item.jobPublish.comRecruiters.enterprise.enterpriseName}}</div>
            <!--        <div class="industry">{{data.jobDescription}}</div>-->
            <div class="scale" v-if="item.jobPublish.comRecruiters.enterprise.regcap">{{item.jobPublish.comRecruiters.enterprise.regcap}}人</div>
          </div>
        </div>
        <div class="hr-block">

          <div class="photo">已投递></div>
          <div class="name">{{item.formatTime}}</div>
        </div>
      </router-link>
    </div>
    <el-empty v-else ></el-empty>
    <div v-if="list.length>0 && count>limit" style="display: flex; justify-content: center;align-content: flex-end;">
      <el-pagination
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getWorkApplyByCustomerApi} from "@/api/Account";

export default {
  name: "GetResume",
  data() {
    return {
      list:[],
      page: 1,
      limit: 10,
      count: 0
    }

  },
  methods: {
    imgError(){
      this.list.jobPublish.comRecruiters.enterprise.logoUrl = process.env.VUE_APP_COM_URL;
    },
    getWorkApplyByCustomer() {
      getWorkApplyByCustomerApi({page: this.page,limit: this.limit}).then((res) => {
        this.list = res.list;
        this.count = res.count
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getWorkApplyByCustomer()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getWorkApplyByCustomer()
    },
  },
  mounted() {
    this.getWorkApplyByCustomer();
  }


}
</script>

<style lang="scss" scoped>
.block-con{
  width: 100%;
  min-height: $fullMinHeight;
}
.position-item {
  width: 100%;
  padding: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  align-items: center;
  .info-block{
    width:calc(100% - 120px);
    height: 100%;
    display: flex;
    flex-direction: column;
    .position-name-block{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 15px;
      .position-name{
        font-size: 19px;
        font-weight: bold;
        margin-right: 20px;
      }
      .position-wage{
        font-size: 17px;
        font-weight: bold;
        color: $orange;
      }
    }
    .position-label-block {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .position-label-item {
        margin-right: 10px;
        margin-bottom: 10px;
        color: $darkGray;
        background: $lightGray;
        padding: 4px 8px;
        font-size: 13px;
      }
    }
    .company-block{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 14px;
      .company-photo{
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
      .div{
        margin-right: 20px;
      }
      .industry,.scale{
        color: $darkGray;
      }
    }
  }
  .hr-block{
    width: 200px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    .photo{
      width: 100%;
      padding-top: 30px;
      color: #ff7626;
      text-align: left;
    }
    .name{
      width: 100%;
      margin-top: 10px;
      font-size: 14px;
    }
  }
}

</style>
